<script setup lang="ts">
import type {PrizeVO} from "@/types/vo/PrizeVO";
import type {UserPrizeDTO} from "@/types/dto/UserPrizeDTO";
import type {FormInst, FormRules} from "naive-ui";
import {exchangePrizeService} from "@/apis/front/prize";
import {Icon} from "@iconify/vue";

const showModal = ref(false)
const loading = ref(false)
const formData = ref<UserPrizeDTO>({})
const info = ref<PrizeVO>()

const commonRules = useRules()

const rules = ref<FormRules>({
  address: commonRules.required("请输入地址"),
  phone: commonRules.phone("请输入正确的手机号")
})

const open = (data?: PrizeVO) => {
  showModal.value = true
  if (data) {
    info.value = data
    formData.value.prizeId = data.id
  }
}
const formRef = ref<FormInst>()
const message = useMessage()
const confirm = async () => {
  await formRef.value?.validate()
  try {
    loading.value = true
    await exchangePrizeService(formData.value)
    showModal.value = false
    message.success('兑换成功')
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

defineExpose({
  open
})
</script>

<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    class="exchange-modal w-500px"
    @close="formData = {}"
  >
    <template #header>
      <div class="modal-header">
        <div class="modal-title">
          <Icon icon="ant-design:shopping-cart-outlined" class="title-icon" />
          确认兑换
        </div>
      </div>
    </template>

    <n-spin :show="loading">
      <div class="modal-body">
        <!-- 商品信息 -->
        <div class="product-info">
          <div class="product-image">
            <n-image
              :src="info?.prizeImage || ''"
              class="image"
              preview-disabled
              :fallback-src="'https://img.alicdn.com/imgextra/i1/O1CN01NMnZ7Q1Dcj4QfgQQM_!!6000000000236-2-tps-200-200.png'"
            />
          </div>

          <div class="product-details">
            <div class="product-name">{{ info?.prizeName }}</div>
            <div class="product-points">
              <span class="points-label">所需积分</span>
              <span class="points-value">{{ info?.prizePoints }}</span>
            </div>
          </div>
        </div>

        <!-- 表单 -->
        <div class="form-section">
          <div class="form-title">
            <Icon icon="ant-design:environment-outlined" class="form-icon" />
            收货信息
          </div>

          <n-form
            :model="formData"
            :rules="rules"
            ref="formRef"
            label-placement="left"
            :label-width="80"
          >
            <n-form-item label="收货地址" path="address">
              <n-input
                v-model:value="formData.address"
                placeholder="请输入详细收货地址"
                class="form-input"
              />
            </n-form-item>

            <n-form-item label="联系电话" path="phone">
              <n-input
                v-model:value="formData.phone"
                placeholder="请输入手机号码"
                class="form-input"
              />
            </n-form-item>
          </n-form>
        </div>

        <!-- 按钮 -->
        <div class="action-buttons">
          <n-button
            @click="showModal = false"
            class="cancel-btn"
          >
            取消
          </n-button>

          <n-button
            type="primary"
            @click="confirm"
            v-if="!formData.id"
            class="confirm-btn"
          >
            确认兑换
          </n-button>
        </div>
      </div>
    </n-spin>
  </n-modal>
</template>

<style scoped>
.exchange-modal {
  width: 90%;
  max-width: 480px;
}

.exchange-modal :deep(.n-card) {
  border-radius: 8px;
}

.exchange-modal :deep(.n-card-header) {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.exchange-modal :deep(.n-card__content) {
  padding: 0;
}

.modal-header {
  display: flex;
  align-items: center;
}

.modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  display: flex;
  align-items: center;
}

.title-icon {
  margin-right: 8px;
  color: #389e0d;
}

.modal-body {
  padding: 20px;
}

.product-info {
  display: flex;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
}

.product-image {
  width: 90px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-details {
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #262626;
  margin-bottom: 12px;
  line-height: 1.4;
}

.product-points {
  display: flex;
  align-items: baseline;
}

.points-label {
  font-size: 12px;
  color: #8c8c8c;
  margin-right: 8px;
}

.points-value {
  font-size: 18px;
  font-weight: 500;
  color: #ff4d4f;
}

.form-section {
  margin-bottom: 24px;
}

.form-title {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.form-icon {
  margin-right: 8px;
  color: #389e0d;
}

.form-input {
  border-radius: 4px;
}

.form-input :deep(.n-input__border),
.form-input :deep(.n-input__state-border) {
  border-color: #d9d9d9;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  border-radius: 4px;
}

.confirm-btn {
  border-radius: 4px;
  background-color: #389e0d;
  border: none;
}

.confirm-btn:hover {
  background-color: #52c41a;
}
</style>
